<template>
    <section class="form-container">
        <el-form ref="formRef" :model="formData" :rules="rules" label-width="160px" class="form-content">

            <el-row>
                <el-col :span="12">
                    <el-form-item label="会员UID" prop="uid">
                        <el-input v-model="formData.uid"/>
                    </el-form-item>

                    <el-form-item label="行业" prop="industryTypeIdLevel">
                        <el-cascader
                            v-model="formData.industryTypeIdLevel"
                            :props="industryTypeProps"
                            @change="industryTypeHandleChange"
                            style="width:100%;"
                            ref="cascaderRef"
                        ></el-cascader>
                    </el-form-item>

                    <el-form-item label="公司名称" prop="companyName">
                        <el-input v-model="formData.companyName"/>
                    </el-form-item>
                    <el-form-item label="统一社会信用代码" prop="companyCode">
                        <el-input v-model="formData.companyCode"/>
                    </el-form-item>

                    <el-form-item label="公司电话" prop="companyPhone">
                        <el-input v-model="formData.companyPhone"/>
                    </el-form-item>

                    <el-form-item label="开户行" prop="companyBankName">
                        <el-input v-model="formData.companyBankName"/>
                    </el-form-item>

                    <el-form-item label="银行账号" prop="companyBankNo">
                        <el-input v-model="formData.companyBankNo"/>
                    </el-form-item>

                    <el-form-item label="公司地址" prop="address">
                        <el-input v-model="formData.address" placeholder="移动地图点击“获取”即可自动获取到中心点经纬度" readonly>
                            <template #append>
                                <el-button slot="reference" @click="showMap()">选取地址</el-button>
                            </template>
                        </el-input>
                    </el-form-item>

                    <el-form-item label="法人姓名" prop="companyLegalPerson">
                        <el-input v-model="formData.companyLegalPerson"/>
                    </el-form-item>

                    <el-form-item label="法人身份证号" prop="companyLegalPersonIdCard">
                        <el-input v-model="formData.companyLegalPersonIdCard"/>
                    </el-form-item>

                    <el-form-item label="法人手机号" prop="companyLegalPersonMobile">
                        <el-input v-model="formData.companyLegalPersonMobile"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系人姓名" prop="contactName">
                        <el-input v-model="formData.contactName"/>
                    </el-form-item>

                    <el-form-item label="联系人身份证号" prop="contactIdCard">
                        <el-input v-model="formData.contactIdCard"/>
                    </el-form-item>

                    <el-form-item label="联系人电话" prop="contactMobile">
                        <el-input v-model="formData.contactMobile"/>
                    </el-form-item>

                    <el-form-item label="店铺名称" prop="shopName">
                        <el-input v-model="formData.shopName"/>
                    </el-form-item>

                    <el-form-item label="简介" prop="summary">
                        <el-input type="textarea" v-model="formData.summary"/>
                    </el-form-item>

                    <el-form-item label="商家头像" prop="avatar">
                        <el-upload
                            class="avatar-uploader"
                            :action="apiHost + '/file/upload'"
                            :show-file-list="false"
                            :on-success="avatarHandleSuccess"
                            :headers="headers"
                        >
                            <div v-if="formData.avatar">

                                <img :src="formData.avatar" class="avatar">
                            </div>
                            <i v-else class="el-icon-plus avatar-uploader-icon"/>

                        </el-upload>
                    </el-form-item>

                    <el-form-item label="宣传图" prop="banner">
                        <el-upload
                            :file-list="formData.banner"
                            :action="apiHost + '/file/upload'"
                            :show-file-list="true"
                            :headers="headers"
                            list-type="picture-card"
                            multiple
                            :on-preview="bannerHandlePreview"
                            :on-remove="bannerHandleRemove"
                            :on-success="bannerHandleSuccess"
                        >
                            <i class="el-icon-plus avatar-uploader-icon"/>
                        </el-upload>
                    </el-form-item>

                    <el-form-item label="营业执照" prop="companyBusinessLicense">
                        <el-upload
                            :file-list="formData.companyBusinessLicense"
                            :action="apiHost + '/file/upload'"
                            :show-file-list="true"
                            :headers="headers"
                            list-type="picture-card"
                            multiple
                            :on-preview="businessLicenseHandlePreview"
                            :on-remove="businessLicenseHandleRemove"
                            :on-success="businessLicenseHandleSuccess"
                        >
                            <i class="el-icon-plus avatar-uploader-icon"/>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-form-item>
                <el-popconfirm title="确定保存吗？" @onConfirm="submitForm()">
                    <el-button slot="reference" type="primary">保存</el-button>
                </el-popconfirm>
            </el-form-item>
        </el-form>

        <el-dialog :visible.sync="dialogImageVisible">
            <el-image :src="dialogImageUrl" fit="cover"/>
        </el-dialog>
        <el-dialog :visible.sync="bannerDialogImageVisible">
            <el-image :src="bannerDialogImageUrl" fit="cover"/>
        </el-dialog>
        <GMapSelect ref="mapRef" @bindMapInfo="bindMapInfo"/>
    </section>
</template>

<script>
import {getToken} from '@/utils/auth'
import {industryTypeApi} from "@/api/user/industryTypeApi";
import {sellerApi} from "@/api/user/sellerApi";
import {Common} from "@/utils/common";
import GMapSelect from "@/components/Map/GMapSelect";

export default {
    name: 'sellerAdd',
    components: {GMapSelect},
    data() {
        return {
            formData: {
                id: null,
                uid: 0,
                industryType: [],
                industryTypeIdLevel: [],
                companyName: '',
                companyCode: '',
                companyPhone: '',
                companyBusinessLicense: [],
                companyBankName: '',
                companyBankNo: '',
                companyLegalPerson: '',
                companyLegalPersonIdCard: '',
                companyLegalPersonMobile: '',
                contactName: '',
                contactIdCard: '',
                contactMobile: '',
                shopName: '',
                avatar: '',
                banner: [],
                summary: '',
                provinceName: '',
                provinceCode: '',
                cityName: '',
                cityCode: '',
                districtName: '',
                districtCode: '',
                streetName: '',
                streetCode: '',
                businessName:'',
                address:'',
                lng: '',
                lat: ''
            },
            rules: {
                uid: [
                    {required: true, message: '会员UID不能为空', trigger: 'blur'}
                ],
                industryType: [
                    {required: true, message: '请选择行业', trigger: 'blur'}
                ],
                companyName: [
                    {required: true, message: '公司名称不能为空', trigger: 'blur'},
                    {min: 1, max: 60, message: '长度在 1 到 60 个字符', trigger: 'blur'}
                ]
            },
            dialogImageVisible: false,
            dialogImageUrl: '',
            bannerDialogImageVisible: false,
            bannerDialogImageUrl: '',
            apiHost: process.env.VUE_APP_BASE_API,
            headers: {'X-Token': getToken()},
            industryTypeProps: { //回显条件：默认数据赋值需放在this.$nextTick里且赋值后调用reloadCascader刷新组件
                lazy: true,
                value: 'id',
                label: 'typeName',
                leaf: 'leaf',
                lazyLoad(node, resolve) {
                    const {level, data} = node;
                    let parentId = level === 0 ? 0 : data.id
                    industryTypeApi.getListByParentId(parentId).then((response) => {
                        response.forEach(item => {
                            item.leaf = !item.hasChildren
                        })
                        resolve(response);
                    })
                }
            }
        }
    },
    created(e) {
        this.formData.id = this.$router.currentRoute.query.id
        if(this.formData.id) {
            this.getInfoById(this.formData.id)
        }
    },
    methods: {
        getInfoById(id) {
            let that = this
            sellerApi.getInfoById(id).then((response) => {
                that.formData = Common.assign(this.formData, response)
            })
        },

        bannerHandleSuccess(response, file, fileList) {
            let that = this
            //多图上传时，此处可解决on-success只进入一次问题
            if (!fileList) return
            if (fileList.every(item => item.status === 'success')) {
                fileList.map(item => {
                    if (item.response) {
                        that.formData.banner.push({
                            url: item.response.data
                        })
                    }
                })
            }

            return false
        },

        bannerHandleRemove(e) {
            this.formData.banner = this.formData.banner.filter(v => v.url !== e.url)
        },
        bannerHandlePreview(e) {
            this.bannerDialogImageVisible = true
            this.bannerDialogImageUrl = e.url
        },

        businessLicenseHandleSuccess(response, file, fileList) {
            let that = this

            //多图上传时，此处可解决on-success只进入一次问题
            if (!fileList) return
            if (fileList.every(item => item.status === 'success')) {
                fileList.map(item => {
                    if (item.response) {
                        that.formData.companyBusinessLicense.push({
                            url: item.response.data
                        })
                    }
                })
            }

            return false
        },

        businessLicenseHandleRemove(e) {
            this.formData.companyBusinessLicense = this.formData.companyBusinessLicense.filter(v => v.url !== e.url)
        },
        businessLicenseHandlePreview(e) {
            this.dialogImageVisible = true
            this.dialogImageUrl = e.url
        },

        handleAvatarSuccess(e) {
            this.formData.avatar = e.data
        },

        // 提交表单
        submitForm() {
            const that = this
            that.$refs['formRef'].validate((valid) => {
                if (!valid) return false

                let data = Common.deepClone(that.formData)

                if (data.id && data.id > 0) {
                    sellerApi.edit(data)
                        .then((response) => {
                            // 调用全局挂载的方法,关闭当前标签页
                            this.$store.dispatch('tagsView/delView', this.$route)
                            // 返回上一步路由，返回上一个标签页
                            this.$router.go(-1)
                        })
                } else {
                    sellerApi.addSeller(data)
                        .then((response) => {
                            // 调用全局挂载的方法,关闭当前标签页
                            this.$store.dispatch('tagsView/delView', this.$route)
                            // 返回上一步路由，返回上一个标签页
                            this.$router.go(-1)
                        })
                }
            })
        },
        industryTypeHandleChange(e) {
            this.formData.industryType = e[e.length - 1]
        },

        avatarHandleSuccess(e) {
            this.formData.avatar = e.data
        },

        showMap() {
            this.$refs['mapRef'].showMap(this.formData)
        },
        bindMapInfo(data) {
            this.formData = Common.assign(this.formData, data)
        }
    }
}
</script>

<style scoped>
::v-deep .el-upload--picture-card {
    width: 80px;
    height: 80px;
    line-height: 80px;
}

::v-deep .el-upload-list--picture-card .el-upload-list__item {
    width: 80px;
    height: 80px;
}

::v-deep .el-upload-list__item {
    transition: none !important;
}

</style>
